<script setup>
// 引入
import { onMounted, ref } from 'vue';
import Form from './components/MyForm.vue'

const myDiv = ref(null)
const myForm = ref(null)

onMounted(() => {
  console.log(myDiv.value);
  console.log(myForm.value);
  console.log('父组件尝试获取子组件数据', myForm.value.msg);
})

const handleMyEmit = (data) => {
  // 子传父3事件回调函数
  // 实际干什么取决于业务逻辑需求
  console.log('父传子成功', data);
}
</script>

<template>
  <div ref="myDiv">使用组件</div>
  <!-- 使用 -->
  <!-- 子传父2监听事件 -->
  <Form ref="myForm" @myEmit="handleMyEmit" title="注册表单"></Form>
  <hr>
  <Form ref="myForm" title="登录表单"></Form>
</template>

<style lang="scss" scoped></style>
